.tooltip {
  min-width: 200px;
  background-color: var(--mantine-color-body);
  box-shadow: var(--mantine-shadow-md);
  border-radius: var(--mantine-radius-default);

  @mixin where-light {
    border: 1px solid var(--mantine-color-gray-3);
  }

  @mixin where-dark {
    border: 1px solid var(--mantine-color-dark-4);
  }
}

.tooltipLabel {
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  font-size: var(--mantine-font-size-md);
  font-weight: 500;
  color: var(--mantine-color-bright);
}

.tooltipBody {
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
  padding-top: 0;

  .tooltip:where([data-type='radial']) :where(&) {
    padding-top: var(--mantine-spacing-sm);
  }
}

.tooltipItemColor {
  width: 12px;
  height: 12px;
  min-width: 12px;
  min-height: 12px;
}

.tooltipItem {
  font-size: var(--mantine-font-size-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;

  &:where(& + &) {
    margin-top: calc(var(--mantine-spacing-sm) / 2);
  }

  &[data-type='scatter'] .tooltipItemColor {
    display: none;
  }
}

.tooltipItemBody {
  display: flex;
  align-items: center;
  gap: var(--mantine-spacing-sm);
  margin-inline-end: var(--mantine-spacing-xl);
}

.tooltipItemName {
  color: var(--mantine-color-text);
  font-size: var(--mantine-font-size-sm);
}

.tooltipItemData {
  color: var(--mantine-color-bright);
}
